<template>
	<view>
		<!--收藏-->
		<view class="collection" v-for="(item,index) in products" :key="index">
			<view class="left" @click="toDetail(index)">
				<view class="imgs">
					<image :src="imgs[index]"></image>
				</view>
			</view>
			<view class="center" @click="toDetail(index)">
				<view class="name">
					<text>{{item.product.proName}}</text>
				</view>
				<view class="price">
					<text>价格 : ¥ {{item.product.price}}</text>
				</view>
			</view>
			<view class="right">
				<view class="ifChoose" @click="deleteCollection(index)">
					<text>取消收藏</text>
				</view>
			</view>
		</view>
		
		<!--暂无评价-->
		<view class="zanwupingjia" v-if="this.products.length==0">
			<text>暂无收藏,欢迎浏览</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//商品集合,含名字 价格
				products:[],
				//图片集合,含图片
				imgs:[],
				//用户信息
				user:{
					
				}
			}
		},
		onLoad() {
			//获取用户信息
			// uni.getStorage({
			// 	key:"user",
			// 	success: (res) => {
			// 		this.user=res.data;
			// 	}
			// })
			//同步获取缓存
			const value=uni.getStorageSync("user");
			this.user=value;
			this.getAllCollection();
		},
		methods: {
			//查询该用户所有收藏
			getAllCollection(){
				uni.request({
					url:this.webUrl+"selectAllCollection",
					data:{
						'userId':this.user.userId
					},
					success: (res) => {
						this.products=res.data.list;
						for(var i=0;i<this.products.length;i++){
							this.imgs.push(this.products[i].product.img[0].url);
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载数据失败"
						})
					}
				})
			},
			//取消收藏
			deleteCollection(index){
				//从数据库中移出
				uni.request({
					url:this.webUrl+"deleteCollectionById",
					data:{
						'id':this.products[index].id
					},
					success: (res) => {
						if(res.data.code=="200"){
							uni.showToast({
								title:"成功移出收藏夹"
							})
						}else{
							uni.showToast({
								title:"移出收藏夹失败"
							})							
						}
					}
				})
				//从products和imgs中移出
				this.products.splice(index,1);
				this.imgs.splice(index,1);
			},
			//跳转到详情页
			toDetail(index){
				uni.redirectTo({
					url:"/pages/liu/proDetail/proDetail?proId="+this.products[index].proid+"&categoryId="+this.products[index].product.categoryId
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	
	.collection{
		float: left;
		width: 100%;
		height:160rpx;
		margin-top: 20rpx;
		background-color: rgb(240,240,240);
		.left{
			float: left;
			height: 160rpx;
			width: 200rpx;
			.imgs{
				width:140rpx ;
				height: 140rpx;
				margin-top: 10rpx;
				margin-left: 30rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.center{
			float: left;
			height:160rpx;
			width: 350rpx;
			.name{
				float: left;
				width: 310rpx;
				height: 80rpx;
				margin-left:20rpx ;
				margin-top: 10rpx;
				overflow: hidden;
				line-height: 35rpx;
				text{
					font-size: 25rpx;
					
					color: rgb(148,102,102);
				}
			}
			.price{
				float: left;
				width: 310rpx;
				height: 40rpx;
				margin-left:20rpx ;
				margin-top: 10rpx;
				text{
					font-size: 30rpx;
					color: rgb(148,102,102);
				}							
			}
		}
		.right{
			float: left;
			height: 160rpx;
			width: 200rpx;
			.ifChoose{
				float: left;
				width: 150rpx;
				height: 50rpx;
				background-color: rgb(138,138,138);
				margin-top: 55rpx;
				margin-left: 25rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 40rpx;
				text{
					font-size: 20rpx;
					color: white;
				}
			}
		}
	}
	
	//暂无评价,欢迎选购
	.zanwupingjia{
		width: 100%;
		height: 200rpx;
		float: left;
		line-height: 200rpx;
		text-align: center;
		margin-top: 450rpx;
		font-size: 80rpx;
		color: rgb(200,200,200);
		font-weight: bold;
	}
</style>
